<template>
	<div class="left-box">
		<div class="heade-wrapper">
			<a-input-search
				class="last-input-box"
				:placeholder="searchPlaceholder"
				v-model.trim="searchValue"
				@search="onSearch"
			/>
		</div>
		<top-bottom-layout
			class="content-wrapper"
			v-if="showMember"
		>
			<template #top>
				<scrollList
					ref="accountScrollList"
					panel="Outworker"
					command="accountList"
					:singleAndMult="true"
					:firstLoadSearch="accountFirstLoadSearch"
					:initSearchValue="accountInitSearchValue"
					:showOtherProp="true"
					:showCheckbox="canSelectDept"
					:checkAllShow="false"
					:otherProps="unitOtherProps"
					iconType="cap-icon-alternative-external-un"
					@toCheckValueClickProp="onGetMemberList"
				></scrollList>
			</template>
			<template #bottom>
				<scrollList
					ref="memberScrollList"
					panel="Outworker"
					command="memberList"
					:firstLoadSearch="memberFirstLoadSearch"
					:showOtherProp="true"
					:otherProps="memberOtherProps"
				></scrollList>
			</template>
		</top-bottom-layout>
		<div v-else class="content-wrapper">
			<scrollList
				ref="accountScrollList"
				panel="Outworker"
				command="accountList"
				:singleAndMult="true"
				:checkAllShow="false"
				:firstLoadSearch="accountFirstLoadSearch"
				:initSearchValue="accountInitSearchValue"
				:showOtherProp="true"
				:otherProps="unitOtherProps"
				iconType="cap-icon-alternative-external-un"
			></scrollList>
		</div>
	</div>
</template>

<script>
import { EntityTypes } from '@/utils/orgConstants';
import topBottomLayout from '@/components/topBottomLayout.vue';
import scrollList from '@/components/scrollList';

export default {
	name: '',
	components: {
		topBottomLayout,
		scrollList
	},
	inject: ['app'],
	data() {
		return {
			searchValue: '',
			departmentId: '',
			showMember: true,
			canSelectDept: true,
			accountId: '',
			selectType: [],
			searchPlaceholder: this.$i18n('selectPeople.input',this.$i18n('org.outworker.label')),
			accountInitSearchValue: {},
			unitOtherProps: ['deptName'],
			memberOtherProps: ['postName'],

			accountFirstLoadSearch: true,
			memberFirstLoadSearch: false,

			rightOptions: []
		};
	},
	computed: {
		orgSelect() {
			return this.app().orgSelect;
		}
	},
	methods: {
		initOutProps() {
			this.searchValue = '';
			this.departmentId = '';
			this.memberFirstLoadSearch = false;
		},
		onChangeAccount(data) {
			// 标记单位
			this.$changeAccount(this, data.id);
			if (this.showMember) {
				this.$refs.memberScrollList.initProps();
			}
			this.initOutProps();
			this.accountId = data.id;
			this.departmentId = '';
			this.onAccountSearchData();
		},
		onSearch(val) {
			if (!this.showMember) {
				this.onAccountSearchData(val);
			} else {
				this.onMemberSearchData(val);
			}
		},
		onGetMemberList(data) {
			this.departmentId = data.id;
			this.onMemberSearchData();
		},
		onAccountSearchData(keyword) {
			let { showAllOuterDepartment } = this.orgSelect;
			if (this.showMember) {
				this.$refs.memberScrollList.initProps();
			}
			let params = {
				keyword,
				showAllOuterDepartment,
				accountId: this.accountId
			};
			this.$refs.accountScrollList.initProps();

			this.$refs.accountScrollList.search(params);
		},
		onMemberSearchData(keyword) {
			let { isNeedCheckLevelScope, accessFileSecretLevel } = this.orgSelect;
			this.memberFirstLoadSearch = true;
			const searchArgs = {
				accountId: this.accountId,
				isNeedCheckLevelScope,
				accessFileSecretLevel,
				keyword
			};
			if (this.departmentId) {
				searchArgs.departmentId = this.departmentId;
			}

			this.$refs.memberScrollList.initProps();
			this.$refs.memberScrollList.search(searchArgs);
		}
	},
	created() {
		this.showMember = this.orgSelect.selectType.includes(EntityTypes.Member);
		this.canSelectDept = this.orgSelect.selectType.includes(
			EntityTypes.Department
		);
		if (
			Object.prototype.hasOwnProperty.call(this.app().switchAfterUnit, 'id')
		) {
			this.accountId = this.app().switchAfterUnit.id;
		} else {
			this.accountId = this.orgSelect.defaultAccountId;
		}
		let showAllOuterDepartment = this.orgSelect.showAllOuterDepartment;
		this.accountInitSearchValue = {
			accountId: this.accountId,
			showAllOuterDepartment
		};
		if (!this.showMember) {
			this.searchPlaceholder = this.$i18n('selectPeople.input',this.$i18n('selectPeople.search.external'));
		}
	},
	activated() {
		const { id: accountId } = this.app().switchAfterUnit;
		if (this.$isChangeAccount(this, accountId)) {
			this.onChangeAccount({
				id: accountId
			});
		}
	}
};
</script>

<style scoped lang="scss">
</style>
